<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B站</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font_3931859_680hz27yvpm/iconfont.css">

</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="top_nav">
            <div class="left">
                <a href="#" class="logo"> <i class="iconfont icon-bilibili1"></i> </a>
            </div>
            <div class="right">

                <a href="#" class="search"> <i class="iconfont icon-sousuo1"></i></a>

                <a href="#" class="login">
                    <img src="./images/login.png" alt="">
                </a>

                <a href="#" class="download">
                    <img src="./images/download.png" alt="">
                </a>

            </div>
        </div>

        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">动画</a></li>
                <li><a href="#">番剧</a></li>
                <li><a href="#">国创</a></li>
                <li><a href="#">音乐</a></li>
            </ul>
            <i class="iconfont icon-chevron-down"></i></div>
        </nav>
    </header>

    <!-- 通栏盒子 -->
    <div class="banner">
        <ul>
            <li><a href="#">
                    <div class="pic">
                        <img src="./images/1.jpg" alt="">
                        <div class="txt">
                            <span> <i class="iconfont icon-shipin"></i> 132万</span>
                            <span> <i class="iconfont icon-pinglun"></i> 2.4万</span>
                        </div>

                    </div>
                    <span>
                        你活着补刀就是对我最大的侮 辱，韩服最强王者组单杀集锦#19 </span>

                </a></li>
            <li><a href="#">
                    <div class="pic">
                        <img src="./images/1.jpg" alt="">
                        <div class="txt">
                            <span> <i class="iconfont icon-shipin"></i> 132万</span>
                            <span> <i class="iconfont icon-pinglun"></i> 2.4万</span>
                        </div>

                    </div>
                    <span>
                        你活着补刀就是对我最大的侮 辱，韩服最强王者组单杀集锦#19 </span>

                </a></li>
            <li><a href="#">
                    <div class="pic">
                        <img src="./images/1.jpg" alt="">
                        <div class="txt">
                            <span> <i class="iconfont icon-shipin"></i> 132万</span>
                            <span> <i class="iconfont icon-pinglun"></i> 2.4万</span>
                        </div>

                    </div>
                    <span>
                        你活着补刀就是对我最大的侮 辱，韩服最强王者组单杀集锦#19 </span>

                </a></li>
            <li><a href="#">
                    <div class="pic">
                        <img src="./images/1.jpg" alt="">
                        <div class="txt">
                            <span> <i class="iconfont icon-shipin"></i> 132万</span>
                            <span> <i class="iconfont icon-pinglun"></i> 2.4万</span>
                        </div>
            
                    </div>
                    <span>
                        你活着补刀就是对我最大的侮 辱，韩服最强王者组单杀集锦#19 </span>
            
                </a></li>
            <li><a href="#">
                    <div class="pic">
                        <img src="./images/1.jpg" alt="">
                        <div class="txt">
                            <span> <i class="iconfont icon-shipin"></i> 132万</span>
                            <span> <i class="iconfont icon-pinglun"></i> 2.4万</span>
                        </div>
            
                    </div>
                    <span>
                        你活着补刀就是对我最大的侮 辱，韩服最强王者组单杀集锦#19 </span>
            
                </a></li>
            <li><a href="#">
                    <div class="pic">
                        <img src="./images/1.jpg" alt="">
                        <div class="txt">
                            <span> <i class="iconfont icon-shipin"></i> 132万</span>
                            <span> <i class="iconfont icon-pinglun"></i> 2.4万</span>
                        </div>
            
                    </div>
                    <span>
                        你活着补刀就是对我最大的侮 辱，韩服最强王者组单杀集锦#19 </span>
            
                </a></li>
                <li><a href="#">
                        <div class="pic">
                            <img src="./images/1.jpg" alt="">
                            <div class="txt">
                                <span> <i class="iconfont icon-shipin"></i> 132万</span>
                                <span> <i class="iconfont icon-pinglun"></i> 2.4万</span>
                            </div>
                
                        </div>
                        <span>
                            你活着补刀就是对我最大的侮 辱，韩服最强王者组单杀集锦#19 </span>
                
                    </a></li>
                    <li><a href="#">
                            <div class="pic">
                                <img src="./images/1.jpg" alt="">
                                <div class="txt">
                                    <span> <i class="iconfont icon-shipin"></i> 132万</span>
                                    <span> <i class="iconfont icon-pinglun"></i> 2.4万</span>
                                </div>
                    
                            </div>
                            <span>
                                你活着补刀就是对我最大的侮 辱，韩服最强王者组单杀集锦#19 </span>
                    
                        </a></li>
                        <li><a href="#">
                                <div class="pic">
                                    <img src="./images/1.jpg" alt="">
                                    <div class="txt">
                                        <span> <i class="iconfont icon-shipin"></i> 132万</span>
                                        <span> <i class="iconfont icon-pinglun"></i> 2.4万</span>
                                    </div>
                        
                                </div>
                                <span>
                                    你活着补刀就是对我最大的侮 辱，韩服最强王者组单杀集锦#19 </span>
                        
                            </a></li>
                            <li><a href="#">
                                    <div class="pic">
                                        <img src="./images/1.jpg" alt="">
                                        <div class="txt">
                                            <span> <i class="iconfont icon-shipin"></i> 132万</span>
                                            <span> <i class="iconfont icon-pinglun"></i> 2.4万</span>
                                        </div>
                            
                                    </div>
                                    <span>
                                        你活着补刀就是对我最大的侮 辱，韩服最强王者组单杀集锦#19 </span>
                            
                                </a></li>
        </ul>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <i class="iconfont icon-bilibili1"></i>
        <a href="#">打开App, 看你感兴趣的视频</a>
    </div>

</body>

</html>